<template>
	<div class="work-order-add">
		<el-dialog v-model="state.visible" draggable :close-on-click-modal="false" width="700px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span> 工单添加 </span>
				</div>
			</template>
			<el-form :model="state.form" ref="formRef" label-width="auto">
				<el-card class="mb10">
					<div slot="header" class="clearfix pb10">
				    <span>工单详情</span>
				    <div style="float: right;">工单号：{{state.form.ticketId}}</div>
				  </div>
				  <el-form-item label="申请人" prop="applyName" :rules="[{ required: true, message: '申请人不能为空', trigger: 'blur' }]">
						<el-input v-model="state.form.applyName" placeholder="请输入12个以内字符" clearable />
					</el-form-item>
					<el-form-item label="手机号码" prop="cellPhone" :rules="[{ required: true, message: '手机号码不能为空', trigger: 'blur' }]">
						<el-input v-model="state.form.cellPhone" placeholder="请输入字符串" clearable />
					</el-form-item>
					<el-form-item label="学工号" prop="xgh" :rules="[{ required: true, message: '学工号不能为空', trigger: 'blur' }]">
						<el-input v-model="state.form.xgh" placeholder="请输入字符串" clearable />
					</el-form-item>
					<el-form-item label="区域" prop="regionId" :rules="[{ required: true, message: '请选择地址', trigger: 'blur' }]">
						<el-select v-model="state.form.regionId" placeholder="请选择">
							<el-option v-for="item in state.orderArea"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地址" prop="address" :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]">
						<el-input v-model="state.form.address" placeholder="请输入字符串" clearable />
					</el-form-item>
					<el-form-item label="故障简述" prop="title" :rules="[{ required: true, message: '请输入故障简述', trigger: 'blur' }]">
						<el-input v-model="state.form.title" placeholder="请输入字符串" clearable />
					</el-form-item>
					<el-form-item label="故障详细描述" prop="description">
						<el-input v-model="state.form.description" type="textarea" :autosize="{ minRows: 4}" placeholder="请输入字符串" clearable />
					</el-form-item>
					<el-form-item label="故障类型" prop="problemType">
						<el-select v-model="state.form.problemType" placeholder="请选择">
							<el-option v-for="item in state.faultType"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-card>
				<el-card class="mb10">
					<div slot="header" class="pb10">
				    <span>系统信息</span>
				  </div>
				  <el-form-item label="工单状态">未分配</el-form-item>
				  <el-form-item label="创建人">{{state.form.operatorName}}</el-form-item>
				  <template v-if="state.detail">
				  	<el-form-item label="创建时间">{{state.detail.createTime}}</el-form-item>
	    			<el-form-item label="修改时间">{{state.detail.updateTime}}</el-form-item>
	    			<el-form-item label="分配时间">{{state.detail.distributionTime}}</el-form-item>
				  </template>
				  <el-form-item label="工程师" prop="engineerId" :rules="[{ required: true, message: '请选择工程师', trigger: 'blur' }]">
						<el-select v-model="state.form.engineerId" placeholder="请选择">
							<el-option v-for="item in state.gcsList"
				      :key="item.id"
				      :label="item.realName"
				      :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注" prop="remarks">
						<el-input v-model="state.form.remarks" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入字符串" clearable />
					</el-form-item>
				</el-card>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus'
import {orderAdminAdd, orderUpdate, getEngineer} from "/@/api/order/index.js";
import {switchTime} from "/@/utils/Tools.js";
import { getAPI } from '/@/utils/axios-utils';
import { SysDictDataApi } from '/@/api-services/api';
import { useUserInfo } from '/@/stores/userInfo';
import {getLabelByValue} from "/@/utils/Tools.js";


const userStore = useUserInfo();
const userInfo = userStore.userInfos;

const emits = defineEmits(['reload']);
const formRef = ref();
const state = reactive({
	visible: false,

	detail: null,

	form: {
		ticketId: '',
		applyName: '',
		cellPhone: '',
		xgh: '',
		regionId: '',
		address: '',
		title: '',
		description: '',
		problemType: '',

		status: 2, // 已分配
		operatorId: '',
		operatorName: '',
		engineerId: '',
		remarks: '',
	},

	orderArea: [],
	faultType: [],
	gcsList: [],

});

onMounted(() => {
	$Dict.get('order_area').then(res => {
		state.orderArea = res;
	})
	$Dict.get('fault_type').then(res => {
		state.faultType = res;
	})
	

	getGcs();
})

// 打开弹窗
const open = (row) => {
	state.detail = row || null;
	if(row) {
		if(!row.engineerId) {
			row.engineerId = '';
		}
		for(let key in state.form) {
			if(key == 'regionId') {
				state.form[key] = String(row[key]);
			} else {
				state.form[key] = row[key];
			}
		}
	} else {
		formRef.value?.resetFields();
		state.form.ticketId = createOrderNo();
		
		state.form.operatorId = userInfo.userId;
		state.form.operatorName = userInfo.realName;
	}

	state.visible = true;
};

// 获取工程师
const getGcs = () => {
	getEngineer().then(res => {
		state.gcsList = res.data.result;
	})
}

// 关闭弹窗
const closeDialog = () => {
	emits('reload');
	state.visible = false;
};

// 取消
const cancel = () => {
	state.visible = false;
};

// 提交
const submit = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		let params = {
			...state.form
		}
		let fn = orderAdminAdd;

		// 编辑
		if(state.detail) {
			params = Object.assign(state.detail, params);
			fn = orderUpdate;
		}
		if(params.status == 1 || params.status == 3) {
			params.status = 2;
		}
		params.distributionTime = switchTime(new Date, 'yyyy-MM-dd HH:mm:ss'); // 分配时间
		params.engineerName = getLabelByValue(state.gcsList, params.engineerId, '', 'realName', 'id');
		fn(params).then(res => {
			if(res.data.code == 200) {
				ElNotification({
			    title: '提示',
			    message: '操作成功',
			    type: 'success',
			  })
				closeDialog();
			}
		})
	});
};

// 生产工单号
const createOrderNo = () => {
	let time = switchTime(new Date(), 'yyyyMMddHHmmss');
	let rand = Math.random().toFixed(4).slice(2);
	let res = 'SR'+ time + rand;
	return res;
}

// 导出对象
defineExpose({ open });
</script>
